import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Card,List, Avatar, Button,Badge } from 'antd'
import {delTodo,setRead} from '../../store/msg/actionCreators.js'
const mapStateToProps = (state)=>{
  return {
    msgLists: state.msg.msgLists
  }
}
const mapDispatchToProps = (dispatch)=>{
  return {
    delTodo: (index)=>{
        dispatch(delTodo(index))
    },
    setRead: (index)=>{
      dispatch(setRead(index))
    }
  }
}
@connect(mapStateToProps,mapDispatchToProps)
class MsgLists extends Component {
  render() {
    
    return (
      <Card title="消息中心"> 
          <List
              itemLayout="horizontal"
              dataSource={this.props.msgLists}
              renderItem={(item,index) => {
                
                return (
                  <List.Item
                    actions={[
                      <Button 
                        disabled={item.isCompleted} 
                        onClick={()=>{
                          this.props.setRead(index)
                        }}
                        size="small"  type="primary">点击已读</Button>,
                      <Button 
                        onClick={()=>{
                          this.props.delTodo(index)
                        }}
                        size="small" 
                        danger type="primary">删除</Button>
                      ]}
                  >
                    <List.Item.Meta
                      avatar={
                        <Badge dot={!item.isCompleted}>
                          <Avatar src="https://img.tupianzj.com/uploads/allimg/151227/9-15122G33459.jpg" />
                        </Badge>
                        }
                    
                      description={<span>{item.content}</span>}
                    />
                  </List.Item>
                )
              }}
            />
      </Card>
    )
  }
}

export default MsgLists